<template>
  <view class="container" v-if="myRank && isShow">
    <view class="box">
      <view class="title" v-if="myRank>=90">真厉害！</view>
      <view class="message" v-if="myRank>=90">答题速度超过了
        <text>{{ myRank }}%</text>
        的人 答题小能手非您莫属！
      </view>
      <view class="title" v-if="myRank>=50 && myRank<90">很不错呦！</view>
      <view class="message" v-if="myRank>=50 && myRank<90">答题速度超过了
        <text>{{ myRank }}%</text>
        的人，已经很厉害了，请继续努力提高吧！
      </view>
      <view class="title" v-if="myRank<50">加油！</view>
      <view class="message" v-if="myRank<50">答题速度超过了
        <text>{{ myRank }}%</text>
        的人，下次认真看视频，相信您一定可更快答完哦！
      </view>
      <view class="icon" :style="myRank && isShow?containerStyle:''">
        <view class="gif" v-if="gifShow"></view>
        <image v-if="myRank>=90" :src="image_hosts+'/90.png'"></image>
        <image v-if="myRank>=50 && myRank<90" :src="image_hosts+'/50-90.png'"></image>
        <image v-if="myRank<50" :src="image_hosts+'/50.png'"></image>
      </view>
      <view class="button" @click="toSindex">回到首页，看更多精彩视频</view>
      <view class="datetime">
        <text>{{ toSindexTime }}</text>
        秒 后自动跳转首页
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['myRank'],
  data() {
    return {
      image_hosts: this.image_host + 'videoAnswer',
      isShow: false,
      containerStyle: "",
      gifShow: false,
      toSindexTime: 5,
	  timer: {}, // 定时器对象
    };
  },
  created() {
    this.isShow = true;
	let _this = this
    this.$nextTick(() => {
      this.containerStyle = "transform: scale(1);"
      setTimeout(() => {
        this.gifShow = true
      }, 1000)
      _this.timer = setInterval(() => {
        this.toSindexTime--
        if (this.toSindexTime <= 0) {
          clearInterval(_this.timer)
          this.toSindex();
        }
      }, 1000)
    })
  },
  methods: {
    toSindex() {
      this.isShow = false
      uni.setStorageSync("to_index_message", true)
      uni.switchTab({
        url: '/pages/sindex/index'
      })
    },
	// 清除定时器
	clearIntervalDo(){
		console.log(11111111111111111)
		clearInterval(this.timer)
	},
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: initial;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .8);
}

.box {
  width: 662upx;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 52upx;
  font-weight: 700;
  letter-spacing: 2upx;
  background: linear-gradient(180deg, #FFFDF3 0%, #FFD08A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 10;
}

.message {
  margin-top: 20upx;
  font-size: 48upx;
  color: #FFDFA9;
  z-index: 10;
  text-align: center;
  font-weight: 400 !important;

  text {
    font-weight: 700 !important;
  }
}

.icon {
  width: 500upx;
  height: 500upx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  mix-blend-mode: normal;
  transform: scale(0);
  transition: all .6s linear;

  .gif {
    background-color: #000;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/8dfd924c758c00263c0089ae50132e59.gif");
    background-size: 660upx 660upx;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 150vh;
    opacity: .3;
    position: fixed;
  }

  image {
    position: absolute;
    width: 470upx;
    height: 453upx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.button {
  width: 626upx;
  height: 98upx;
  box-sizing: border-box;
  border-radius: 58upx;
  color: #fff;
  font-size: 43upx;
  text-align: center;
  line-height: 98upx;
  z-index: 10;
  background-color: #5CAE77;
}

.datetime {
  color: #fff;
  font-size: 43upx;
  margin-top: 36upx;
}
</style>
